<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <%--    <script src="https://v-cn.vaptcha.com/v3.js"></script>--%>



    <style>
        body {
            background: url("${pageContext.request.contextPath}/static/img/login.jpg");
        }

        .row {
            margin-top: 200px;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        button {
            margin-top: 20px;
            margin-left: 40%;
        }

        .msg {
            color: red;
        }
        .vaptcha-init-main {
            display: table;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }
        .vaptcha-init-loading {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .vaptcha-init-loading > a {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: none;
        }

        .vaptcha-init-loading .vaptcha-text {
            font-family: sans-serif;
            font-size: 12px;
            color: #cccccc;
            vertical-align: middle;
        }
    </style>

</head>
<body>
<!-- 顶部 -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                &nbsp;欢迎使用权限管理后台系统
            </a>
        </div>
    </div>
</nav>




<!-- 表单区 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            <form  name="logfrom" class="form-horizontal" method="post" action="${pageContext.request.contextPath}/user/login">
                <div class="form-group">
                    <label for="userName">用户名</label>
                    <input type="text" name="userName" class="form-control" id="userName" placeholder="Name" >
                </div>
                <div class="form-group">
                    <label for="password">密 码</label>
                    <input type="password" name="userPwd" class="form-control" id="password" placeholder="Password">
                </div>
                <%--                <button id="TencentCaptcha" data-appid="2092428141" data-cbfn="callbackName" data-biz-state="data-biz-state" type="button">验证</button>--%>
                <button type="button" id="TencentCaptcha" data-appid="2092428141" data-cbfn="callbackName" data-biz-state="data-biz-state" class="btn btn-default btn-lg btn-success">登录</button>



            </form>

            <div id="divMsg" class="alert alert-dismissable alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4 id="h4">
                    注意！
                </h4> <br/><strong id="msg" style="color: salmon">${requestScope.msg}</strong>
                <strong id="msg2"></strong>
            </div>
        </div>
    </div>
</div>
<script>
    // 回调函数需要放在全局对象window下
    window.callbackName = function (res) {
        // 返回结果
        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
        // CaptchaAppId       String    验证码应用ID。
        // bizState    Any       自定义透传参数。
        // randstr     String    本次验证的随机串，请求后台接口时需带上。
        console.log("callback:", res);
        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        if (res.ret === 0) {
            console.log("验证成功")
            var form=document.getElementById('loginin');
            document.logfrom.submit();
        }
    }

    $("#userName").blur(function (){
        $.ajax({
            url:"${pageContext.request.contextPath}/user/username",
            type:"post",
            data:{"name":$("#userName").val()},
            success:function (flag){
                if(flag.toString()==="ture"){
                    $("#msg2").text("账号正确").css("color","green")
                }else {
                    $("#msg2").text("账号在数据库中不存在").css("color","salmon")
                }
            }

        })
    }).focus(function (){
        $("#msg2").text("")
    })
</script>


</body>
</html>